<template>
  <view class="login-container">
    <view class="login-form">
      <view class="form-item">
        <text class="label">学校：</text>
        <picker class="picker" mode="selector" :range="schoolNames" :value="schoolIndex" @change="handleSchoolChange">
          <view class="picker-content">
            {{ selectedSchool || '请选择学校' }}
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="label">姓名：</text>
        <input class="input" type="text" v-model="form.name" placeholder="请输入姓名" />
      </view>
      
      <view class="form-item">
        <text class="label">电话：</text>
        <input class="input" type="number" v-model="form.phone" placeholder="请输入电话号码" maxlength="11" />
      </view>
      
      <view class="button-container">
        <button class="register-btn" @tap="handleRegister">注册</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// 学校数据相关
const schoolList = ref([])
const schoolNames = ref([])
const schoolIndex = ref(0)
const selectedSchool = ref('')
const isLoading = ref(false)

// 表单数据
const form = reactive({
  schoolId: '',
  schoolName: '',
  name: '',
  phone: ''
})

// 获取学校列表
const getSchoolList = async () => {
  isLoading.value = true
  try {
    const res = await uniCloud.callFunction({
      name: 'get_schools',
      data: {
        page: 1,
        pageSize: 100
      }
    })
    
    if (res.result.code === 0 && res.result.data) {
      schoolList.value = res.result.data
      schoolNames.value = schoolList.value.map(item => item.name)
      console.log('获取学校列表成功', schoolList.value)
    } else {
      uni.showToast({
        title: '获取学校列表失败',
        icon: 'none'
      })
    }
  } catch (e) {
    console.error('获取学校列表异常', e)
    uni.showToast({
      title: '获取学校列表异常',
      icon: 'none'
    })
  } finally {
    isLoading.value = false
  }
}

// 学校选择变化处理
const handleSchoolChange = (e) => {
  const index = e.detail.value
  schoolIndex.value = index
  selectedSchool.value = schoolNames.value[index]
  
  const selectedSchoolData = schoolList.value[index]
  form.schoolId = selectedSchoolData._id
  form.schoolName = selectedSchoolData.name
}

// 注册处理
const handleRegister = () => {
  // 表单验证
  if (!form.schoolId) {
    uni.showToast({
      title: '请选择学校',
      icon: 'none'
    })
    return
  }
  
  if (!form.name) {
    uni.showToast({
      title: '请输入姓名',
      icon: 'none'
    })
    return
  }
  
  if (!form.phone || !/^1\d{10}$/.test(form.phone)) {
    uni.showToast({
      title: '请输入正确的手机号码',
      icon: 'none'
    })
    return
  }
  
  // 提交注册信息
  console.log('提交注册信息', form)
  
  // 模拟注册成功，设置token并跳转至首页
  const token = `${form.name}_${Date.now()}`
  uni.setStorageSync('token', token)
  uni.setStorageSync('userInfo', form)
  
  uni.showToast({
    title: '注册成功',
    success: () => {
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/index/index'
        })
      }, 1500)
    }
  })
}

// 生命周期钩子
onMounted(() => {
  // 页面加载时获取学校列表
  getSchoolList()
})
</script>

<style>
.login-container {
  padding: 30px 20px;
}

.login-form {
  margin-top: 20px;
}

.form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

.label {
  width: 80px;
  text-align: right;
  padding-right: 10px;
}

.picker, .input {
  flex: 1;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.picker-content {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
}

.input {
  padding: 0 10px;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.register-btn {
  background-color: #07C160;
  color: white;
  width: 80%;
  border-radius: 4px;
}
</style> 